<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { VueFlow, Handle } from '@vue-flow/core';
import type { Node, Edge } from '@vue-flow/core';
const props = defineProps<{
  nodeValue: Node;
}>();
</script>

<template>
  <div class="api-node">
    <Handle type="source" class="api-handle" :position="nodeValue?.sourcePosition"></Handle>

    <Handle type="target" class="api-handle" :position="nodeValue?.targetPosition"></Handle>

    <div>出口：{{ nodeValue?.sourcePosition }}</div>

    <div>进口：{{ nodeValue?.targetPosition }}</div>
  </div>
</template>

<style scoped lang="less">
.api-node {
  text-align: center;
  height: 50px;
  width: 150px;
  border-radius: 5px;
  background-color: #e26969;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

// 是一个中间空心的15px的圆
.api-handle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
}
</style>
